<template>
  <div class="box">
      <div class="content">
          <input type="checkbox">
          <img src="../assets/1.jpg" alt="">
          <div class="box2">
              <span class="people">海贼王手办-白胡子</span>
              <select id="list">
                  <option value="1">海贼世界最强的男人</option>
                  <option value="1">白胡子海贼团团长</option>
              </select>
              <div class="mark">$ <span>386</span></div>
             <div class="num">
               <button class="plus">+</button>
               <span>1</span>
               <button class="subtracts">-</button>
             </div>
          </div>
      </div>

        <div class="content">
          <input type="checkbox">
          <img src="../assets/2.jpg" alt="">
          <div class="box2">
              <span class="people">阴阳师手办-晴明</span>
              <select id="list">
                  <option value="1">平安京守护者</option>
                  <option value="1">最强阴阳师</option>
              </select>
              <div class="mark">$ <span>866</span></div>
             <div class="num">
               <button class="plus">+</button>
               <span>1</span>
               <button class="subtracts">-</button>
             </div>
          </div>
      </div>

      <div class="settlement">
        <div class="selectAll">
          <input type="checkbox">
          <div class="windUp">已选<span>(0)</span></div>
        </div>
        <div class="total">
            <div class="money">合计:￥<span>1354</span></div>
            <div class="purchase">下单</div>
        </div>         
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    width: 400px;
    height: 600px;
    background: #eee;
    margin: 0 auto;
    position: relative;
  }
  .content{
    width: 100%;
    height: 200px;
    background: #ccc;
    position: relative;
  }
  input{
    width: 20px;
    height: 20px;
  }
  .content input{
    position: absolute;
    left: 14px;
    bottom: 50%;
  }
  .content img{
    width: 170px;
    height: 170px;
    line-height: 170px;
    position: absolute;
    left: 45px;
    bottom: 15px;
  }
  .box2{
    width: 170px;
    height: 100%;
    float: right;
    position: relative;
  }
  .box2 .people{
   position: absolute;
    left: 0;
    top: 40px;
  }
  .box #list{
    position: absolute;
    left: 0;
    top: 80px;
    height: 25px;
    border: none;
  }
   .box .mark{
    width: 60px;
    position: absolute;
    left: 0;
    bottom: 22px;
    font-size: 20px;
   }
   .box2 .num{
     width: 100px;
     height: 30px;
     line-height: 30px;
     background: orange;
     position: absolute;
     right: 0;
     bottom: 17px;
     display: flex;
     justify-content: space-between;
   }
   .num button{
     width: 30px;
     height: 30px;
   }
   .box .settlement{
     width: 100%;
     height: 60px;
     background: #ddd;
     position: absolute;
     bottom: 0;
   }
   .settlement input{
    position: absolute;
    bottom: 18px;
    left: 30px;
   }
    .settlement .windUp{
    position: absolute;
    bottom: 18px;
    left: 60px;
   }
   .settlement .total{
     width: 200px;
     height: 100%;
     /* background: paleturquoise; */
     position: absolute;
     right: 0;
   }
   .total .money{
    position: absolute;
    top: 18px;
    right: 110px;
   }
   .total .purchase{
     width: 100px;
     height: 100%;
     line-height: 60px;
     background: red;
    position: absolute;
    right: 0px;
   }
</style>